<template>
 <div>

        <myheader></myheader>

      <br><br>
      <!--面包屑导航-->
      <Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">

      <table>
        <tr>
          <td>用户名</td>
          <td><input type="text" v-model="username"></td>
        </tr>
        <tr>
          <td>密码</td>
          <td><input type="text" v-model="password"></td>
        </tr>
        <tr>
          <td></td>
          <td>
            <!--滑块验证码-->
            <drag-verify :width="width" :height="height" :text="text" ref="Verify"></drag-verify>
          </td>
        </tr>
        <tr>
          <td>
            <button @click="login" class="log">登录</button>
            <img style="cursor: pointer" src="http://127.0.0.1:8000/static/sina.png" alt=""
            @click="sina"
            >
            <img style="cursor:pointer;" src="http://localhost:8000/static/dingding.png" @click="dingding" />
          </td>
        </tr>
      </table>

		</div>
	</section>





	<myempennage></myempennage>

  </div>
</template>

<script>
    import myheader from './myheader'
  import myempennage from './myempennage'
    import dragVerify from 'vue-drag-verify'
    import {config,formatXml} from "../config";

    export default {
        name: "login",
      data () {
          return {
            //声明面包屑变量
            datas:[{title:'首页', route:{name:'index'}}, {title:'登录页'}],
            username:'',
            password:'',
            code:'',
            // 滑块验证码
            text:'请将滑块拖动到最右侧',
            width:200,
            height:20,
          }
        },

      // 注册组件标签
      components:{
        'myheader': myheader,
        'myempennage': myempennage,
        'dragVerify': dragVerify,
      },

        mounted:function(){



      },
        methods:{
          // 钉钉扫码登录
          dingding(){
        let url = config['dingding'];
        window.location.href = url;


      },

          // 新浪微博登录
          sina:function(){
            // console.log(config['baseurl']);
            // console.log(formatXml);

            // 组装url
            let url = "https://api.weibo.com/oauth2/authorize?client_id=3035970630&redirect_uri=http://127.0.0.1:8000/md_admin/weibo";

            // 跳转
            window.location.href = url
          },

          // 提交登录
          login:function () {

            if(this.username == ''){
              // alert('用户名不能为空')
              this.$Message('用户名不能为空')
              return false
            }
            if(this.password == ''){
              // alert('密码不能为空')
              this.$Message('密码不能为空')
              return false
            }

            // 验证是否拖动
            console.log(this.$refs.Verify.isPassing);
            if(this.$refs.Verify.isPassing == false){
              this.$Message('请拖动验证码')
              return false;
            }

            this.axios.get(
              'http://127.0.0.1:8000/login/',
              {params:{username: this.username, password: this.password}}
              ).then(res=>{
                console.log(res)
              this.$Message(res.data.msg)
              if(res.data.code == 200){
                // 将用户名和id存储到localStorage, sessionStorage
                localStorage.setItem('username', res.data.username)
                localStorage.setItem('uid', res.data.uid)
                localStorage.setItem('jwt', res.data.jwt)
                localStorage.setItem('type', res.data.type)
                // 跳转
                this.$router.push('/')
              }
            })
          },


        }
    }
</script>

<style scoped>

</style>
